<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <countTo :start-val="1" :end-val="2017" :duration="3000" />
    <ul>
      <li>
        <h2>组织总人数 </h2>
        <countTo :start-val="1" :end-val="2017" :duration="3000" />
      </li>
      <li>
        <h2>正式员工 </h2>
        <countTo :start-val="1" :end-val="287" :duration="3000" />
      </li>
      <li>
        <h2>合同待签署 </h2>
        <countTo :start-val="1" :end-val="139" :duration="3000" />
      </li>
      <li>
        <h2>待入职 </h2>
        <countTo :start-val="1" :end-val="473" :duration="3000" />
      </li>
    </ul>
    <!--  -->
    <div>
      {{ $store.getters.company }}--{{ $store.getters.departmentName }}
    </div>
    <div class="echart" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import countTo from 'vue-count-to'
import { getHomeData } from '@/api/home'
import * as echarts from 'echarts'
export default {
  name: 'Dashboard',
  components: { countTo },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  async  mounted() {
    // 基于准备好的dom，初始化echarts实例
    const { socialInsurance: { xAxis, yAxis }} = await this.getHomeData()
    var myChart = echarts.init(document.querySelector('.echart'))
    // 绘制图表
    myChart.setOption({
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xAxis
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: yAxis,
          type: 'line',
          areaStyle: {
            // 颜色样式在这里改
            color: '#50dad2'
            // symbol: 'rect',
            // symbolSize: '20'
          },
          symbol: 'rect',
          symbolSize: 10
        }
      ]
    })
  },
  methods: {
    async getHomeData() {
      const res = await getHomeData()
      console.log(res)
      return res
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
ul {
  display: flex;
}
li {
  border-radius: 8px;
  text-decoration: none;
  list-style: none;
  width: 200px;
  height: 150px;
  // display: flex;
  text-align: center;
  padding-top: 20px;
  margin-right: 5px;

  text-decoration: none;
  background-color: #ccc;
  h2 {
    margin-top: 30px;
  }
}
.echart {
  width: 600px;
  height: 500px;
  border: 1px solid black;
  margin: 50px auto;
  padding: 50px;
}
</style>
